<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>商品列表</title>
  <meta name="keywords" content="文乐文" />
  <meta name="description" content="文乐文" />

  <link rel="stylesheet" href="static/css/swiper.min.css" type="text/css" />
  <link rel="stylesheet" href="static/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="static/css/common.css" type="text/css" />
  <link rel="stylesheet" href="static/css/element2.css" />
</head>

<body>
  <div id="app" v-cloak>
    <!-- 包含头部 -->
    <div class="header_box">
      <!-- container-fluid -->
      <div class="header container">
        <div class="logo_box">
          <img src="static/picture/logo2.png" />
        </div>
        <div class="nav_box">
          <a href="index.html">
            <div class="item">首页</div>
          </a>
          <a href="goods.html">
            <div class="item ">产品中心</div>
          </a>
          <a href="integral.html">
            <div class="item ">积分商城</div>
          </a>
          <a href="lease.html">
            <div class="item">进销存ERP</div>
          </a>
          <a href="service.html">
            <div class="item">服务与支持</div>
          </a>
          <a href="my.html">
            <div class="item ">个人中心</div>
          </a>
        </div>
        <div class="buy-box">
          <a href="javascript:;" class="tit">购买</a>
          <div class="sub" style="display: none">
            <div class="list">
              <a target="_blank" href="https://mall.jd.com/index-11504190.html?from=pc">文乐文京东旗舰店</a>
            </div>
          </div>
        </div>
        <div class="search_box">
          <input name="keyword" type="text" class="search_input" id="header_search_input" placeholder="搜索">
          <button id="header_search_btn" class="search_btn"></button>
        </div>
      </div>
    </div>

    <div class="page_order_list container">
      <div class="title">订单列表/Order list</div>
      <div class="btns2">
        <el-button @click="changeTav('')" type="primary" size="small">全部</el-button>
        <el-button @click="changeTav(0)" type="primary" size="small">待付款{{orderData.unPaidCount || 0}}</el-button>
        <el-button @click="changeTav(1)" type="primary" size="small">待发货{{orderData.unShippedCount || 0}}</el-button>
        <el-button @click="changeTav(2)" type="primary" size="small">待收货{{orderData.receivedCount || 0}}</el-button>
        <el-button @click="changeTav(3)" type="primary" size="small">待评价{{orderData.evaluatedCount || 0}}</el-button>
        <el-button @click="changeTav(4)" type="primary" size="small">已完成{{orderData.completeCount || 0}}</el-button>
      </div>
      <div class="order_list">
        <div class="search_box">
          <div class="title">订单筛选</div>
          <div class="search_form" style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              ">
            <div>
              <div class="item" style="
                display: flex;
                align-items: center;
              ">
                <label class="ititle" style="width: 70px;">关键字:</label>
                <el-input size="small" v-model="query.keyword" placeholder="请输入关键字"></el-input>
              </div>
              <div class="item">
                <label class="ititle">下单时间:</label>
                <el-date-picker v-model="value2" type="daterange" size="small" align="right" value-format="yyyy-MM-dd"
                  unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </div>
              <div class="item">
                <button type="submit" class="btn btn-xs btn-primary search_btn" @click="search">
                  确定
                </button>
              </div>
            </div>

            <div style="font-size: 16px;">
              <span style="margin-right: 30px;">订单数量：{{allNumber.orderCount}}</span></span>
              <span>订单金额：￥{{allNumber.sumPrice}}</span>
            </div>
            <el-button @click="exportOrder" type="primary" size="small">导出订单</el-button>
          </div>
        </div>

        <table class="olist table table-bordered">
          <tr>
            <td class="oinfo">订单信息</td>
            <td class="op">商品列表</td>
            <td class="opt">操作</td>
          </tr>
          <tr v-for="(item,index) in orderlist" :key="index">
            <td class="oinfo">
              <div style="margin-bottom: 10px">
                状态：<el-tag size="small"
                  :type="item.status == 0?'danger':item.status == 1?'':item.status == 2?'success':'success'">{{item.status
                  == 0?'待发货':item.status ==
                  1?'待收货':item.status == 2?'已收货':item.status ==
                  3?'已完成':''}}</el-tag>
              </div>
              <div>订单号：{{item.orderId}}</div>
              <div>订单金额：￥{{item.payPrice}}</div>
              <div>下单时间：{{item.createTime}}</div>
              <div>物流公司：{{item.deliveryName}}</div>
              <div>物流单号：{{item.deliveryId}}</div>
              <div>买家备注：{{item.mark}}</div>
              <div>卖家备注：{{item.remark}}</div>
            </td>
            <td class="op">
              <table class="op_list table table-bordered">
                <tr>
                  <td>商品图片</td>
                  <td>商品名称</td>
                  <td>单位</td>
                  <td>单价</td>
                  <td>购买数量</td>
                  <td>总价</td>
                </tr>
                <tr v-for="(item2,index2) in item.productList" :key="index2">
                  <td>
                    <el-image :src="item2.info.image" :preview-src-list="[item2.info.image]">
                    </el-image>
                  </td>
                  <td>{{item2.info.productName}}</td>
                  <td>{{item2.info.sku}}</td>
                  <td>￥{{item2.info.price}}</td>
                  <td>{{item2.info.payNum}}</td>
                  <td>￥{{item2.info.payNum*parseFloat(item2.info.price)}}</td>
                </tr>

                <tr>
                  <td colspan="4" style="text-align: right">合计</td>
                  <td>{{item.totalNum}}</td>
                  <td>￥{{item.payPrice}}</td>
                </tr>
              </table>
            </td>
            <td class="opt">
              <div>
                <el-button type="danger" v-if="item.status == 0" size="small"
                  @click="closeOrder(item.id)">取消订单</el-button>
                <el-button type="primary" size="small" v-if="item.status > 0" style="margin-left: 0;margin-top: 10px;"
                  @click="seeFahuo(item.orderId)">查看发货记录</el-button>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div class="page_box row" style="margin-bottom: 20px">
        <el-pagination background layout="prev, pager, next" @change="changePage" :page-size="query.limit"
          :total="total" />
      </div>
    </div>

    <!-- 包含公共底部文件 -->
    <div class="footer">
      <div class="footer_box container">
        <div class="contact_box col-sm-4 f-cb">
          <div class="dtitle">服务/Service</div>
          <div class="tel_box">
            <p class="title">全国统一热线电话</p>
            <p class="tel">0574-58974484</p>
          </div>
          <div class="mail_box">
            <p class="title">服务邮箱</p>
            <p class="mail">598292588@qq.com</p>
          </div>
        </div>
        <div class="nav_list col-sm-4 f-cb">
          <div class="dtitle">导航/Navigation</div>
          <ul class="nav_box">
            <li><a href="about.html">关于我们</a></li>
            <li><a href="">商品中心</a></li>
            <li><a href="lease.html">打印机租赁</a></li>
            <li><a href="service.html">服务与支持</a></li>
            <li><a href="contact.html">联系我们</a></li>
          </ul>
        </div>
        <div class="search col-sm-4 f-cb">
          <div class="dtitle">产品中心/Product center</div>
          <div class="search_box">
            <input class="search_input" name="keyword" placeholder="搜索" />
            <!-- <button class="btn btn-primary jd_btn" type="button">京东商城</button>-->
            <a class="btn btn-primary jd_btn" target="_blank"
              href="https://mall.jd.com/index-11504190.html?from=pc">京东商城</a>
          </div>
          <div class="wechat_box">
            <div class="item">
              <img src="static/picture/wechat.svg" />
            </div>
            <div class="item">
              <img src="static/picture/weibo.svg" />
            </div>
          </div>
        </div>
      </div>

      <div class="site_info container">
        Copyright ©2020 宁波文乐文科技有限公司 版权所有
        <a href="https://beian.miit.gov.cn/#/Integrated/index">浙ICP备2020041669号-1</a>
      </div>
    </div>
    <el-dialog title="发货记录" :visible.sync="dialogVisible" width="60%">
      <div>
        <div v-for="(item,index) in orderInfoMain.sendList" :key="index" style="margin-bottom: 20px;">
          <div>商品名称和发货数量：
            <span v-for="(item2,index2) in item.sendDetailList" :index="idnex2" style="margin-right: 10px;">
              {{item2.info.productName}}({{item2.info.payNum}})
            </span>
          </div>
          <div>快递公司：{{item.deliveryName}}</div>
          <div>快递号：{{item.deliveryId}}</div>
          <div>发货时间：{{item.createTime}}</div>
        </div>
      </div>
    </el-dialog>
  </div>



  <script src="static/js/vue2.js"></script>
  <script src="static/js/element2.js"></script>
  <script src="static/js/jquery.js"></script>
  <script src="static/js/common.js"></script>
</body>

</html>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      orderInfoMain: {},
      dialogVisible: false,
      orderData: {}, //订单详细统计
      query: {
        createTimes: "",
        type: null,
        limit: 10,
        page: 1,
        keyword: ''
      },
      total: 0,
      orderlist: [],
      tableData: [],
      allNumber: {
        sumPrice: '',
        orderCount: '',
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value2: "",
    },
    created() {


      let token = localStorage.getItem("token")
        ? localStorage.getItem("token")
        : "";

      if (token) {
        this.getData();
        this.getOrderData();

      } else {
        this.$message.error("请先登录");
        setTimeout(() => {
          window.location.href = "./index.html";
        }, 1500);
      }
    },
    methods: {
      getOrderData() {
        $.ajax({
          url: apiurl + "/api/front/order/data",
          data: this.query,
          headers: {
            "Content-Type": "application/json",
            "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
          },
          success: (res) => {

            if (res.code == 401) {
              this.$message.error("请先登录");
              setTimeout(() => {
                window.location.href = "./index.html";
              }, 1500);
            }


            if (res.code == 200) {
              this.$set(this, 'orderData', res.data);
            } else {
              this.$message.error(res.message);
            }
          },
        });
        // orderData({
        // 	createTimes:that.createTimes,
        // 	type: that.orderStatus == 999?'':that.orderStatus,
        // }).then(res => {
        // 	that.$set(that, 'orderData', res.data);
        // })
      },
      search() {
        if (this.value2 && this.value2.length > 0) {
          this.query.createTimes = this.value2.toString();
        } else {
          this.query.createTimes = ''
        }
        this.query.page = 1;
        this.getData();
      },
      getData() {
        $.ajax({
          url: apiurl + "/api/front/order/list",
          data: this.query,
          headers: {
            "Content-Type": "application/json",
            "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
          },
          success: (res) => {
            if (res.code == 401) {
              this.$message.error("请先登录");
              setTimeout(() => {
                window.location.href = "./index.html";
              }, 1500);
            }


            if (res.code == 200) {
              this.orderlist = res.data.list;
              this.total = res.data.total;

              this.getAllNumber()
            } else {
              this.$message.error(res.message);
            }


          },
        });
      },
      changeTav(e) {
        this.query.type = e
        this.getData()
      },
      getAllNumber() {
        $.ajax({
          url: apiurl + "/api/front/order/data",
          data: this.query,
          headers: {
            "Content-Type": "application/json",
            "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
          },
          success: (res) => {
            if (res.code == 401) {
              this.$message.error("请先登录");
              setTimeout(() => {
                window.location.href = "./index.html";
              }, 1500);
            }

            if (res.code == 200) {
              console.log('统计信息')
              console.log(res)
              this.allNumber = res.data
            } else {
              this.$message.error(res.message);
            }
          },
        });
      },
      changePage(e) {
        this.query.page = e;
        this.getData();
      },
      seeFahuo(id) {
        $.ajax({
          url: apiurl + `/api/front/order/detail/${id}`,
          type: "GET",
          headers: {
            "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
          },
          success: (res) => {
            console.log('发货详情');
            console.log(res.data.sendList);

            if (res.code == 401) {
              this.$message.error("请先登录");
              setTimeout(() => {
                window.location.href = "./index.html";
              }, 1500);
            }

            if (res.code == 200) {
              this.orderInfoMain = res.data
              this.dialogVisible = true
            } else {
              this.$message.error(res.message);
            }



            // if (res.code == 200) {
            //   this.$message.success("订单取消成功");
            // } else {
            //   this.$message.error(res.message);
            // }
            // this.getData();


          },
        });
      },
      closeOrder(id) {
        console.log(id);
        this.$confirm("是否确认删除该订单?", "提示", {
          type: "warning",
        }).then(() => {
          $.ajax({
            url: apiurl + `/api/front/order/cancel?id=${id}`,
            data: JSON.stringify({ id }),
            type: "POST",
            headers: {
              "Content-Type": "application/json",
              "Authori-zation": localStorage.getItem("token")
                ? localStorage.getItem("token")
                : "",
            },
            success: (res) => {
              console.log(res);
              if (res.code == 200) {
                this.$message.success("订单取消成功");
              } else {
                this.$message.error(res.message);
              }
              this.getData();
            },
          });
        });
      },
      exportOrder() {
        $.ajax({
          url: apiurl + "/api/front/order/orderExport",
          data: this.query,
          headers: {
            "Content-Type": "application/json",
            "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
          },
          success: (res) => {
            if (res.code == 200) {
              let filename = res.data.fileName
              window.open(filename)
            } else {
              this.$message.error(res.message);
            }
          },
        });

      }
    },
  });
</script>

<style>
  .productWinList .item .titles {
    font-size: 14px;
    text-align: center;
  }

  .productWinList .item {
    margin: 5px 0;
  }

  .productWinList .item .listn {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .productWinList .item .listn .itemn {
    border: 1px solid #f2f2f2;
    font-size: 13px;
    color: #282828;
    padding: 4px 16px;
    border-radius: 5px;
    margin-top: 10px;
    margin-right: 7px;
    background-color: #f2f2f2;
    cursor: pointer;
  }

  .productWinList .item .listn .on {
    color: #e93323;
    background: #fff4f3;
    border-color: #e93323;
  }

  .address_box .active {
    color: red;
  }

  button {
    outline: none;
  }

  .otherlist {
    margin-top: 10px;
  }
</style>